<template>
  <div class="hotel">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      酒店
      <span class="iconfont icon-jiantou-copy"></span>
      {{$store.state.hotel.positionCity}}酒店预订
    </div>
    <!-- 搜索框 -->
    <searchForm @sendForm="getTime" />
    <!-- 配置 -->
    <hotelOption @sendId="getId" :data="hotelObj.data" />
    <!-- 酒店筛选 -->
    <hotelFilter @sendFliter="getFilter" />
    <!-- 酒店列表 -->
    <hotelList :data="hotelObj" @sendPage="getPage" />
  </div>
</template>

<script>
import searchForm from "@/components/hotel/searchForm";
import hotelOption from "@/components/hotel/hotelOption";
import hotelFilter from "@/components/hotel/hotelFilter";
import hotelList from "@/components/hotel/hotelList";
export default {
  components: {
    searchForm,
    hotelOption,
    hotelFilter,
    hotelList,
  },
  data() {
    return {
      hotelOption: [],
      params: [],
      hotelObj: {},
      filterParams: [],
      idParams: [],
      pageParams: [],
      timeParams: [],
    };
  },
  //可以进行seo优化，这只做title变化
  head() {
    return {
      title: "酒店",
    };
  },
  watch: {
    $route: {
      handler() {
        if (this.$route.query.cityName) {
          this.$store.commit(
            "hotel/setPositionCity",
            this.$route.query.cityName
          );
        } else {
          this.getPosition();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //获取定位城市
    getPosition() {
      this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: "08ba82c4034203d71ec3eb13733750fd",
        },
      }).then((res) => {
        if ((res.data.info = "ok")) {
          this.$alert(`定位当前的城市：${res.data.city}`, "提示", {
            confirmButtonText: "确定",
          });
          this.$store.commit("hotel/setPositionCity", res.data.city);
          this.$router.push({ query: { cityName: res.data.city } });
        }
      });
    },
    //接收参数
    getId(val) {
      this.idParams = val;
      this.getHotelList();
    },
    getPage(val) {
      this.pageParams = val;
      this.getHotelList();
    },
    getFilter(val) {
      this.filterParams = val;
      this.getHotelList();
    },
    getTime(val) {
      if (val) {
        this.timeParams = val;
        this.getHotelList();
      }
    },
    //获取酒店
    getHotelList() {
      var params = [
        ...this.idParams,
        ...this.params,
        ...this.filterParams,
        ...this.pageParams,
        ...this.timeParams,
      ];
      var str = "";
      params.forEach((item) => {
        var key = Object.keys(item)[0];
        var value = item[key];
        str += "&" + key + "=" + value;
      });
      this.$axios({
        url: "/hotels?" + str,
      }).then((res) => {
        this.hotelObj = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.hotel {
  width: 1000px;
  margin: 0 auto;
  .breadcrumb {
    padding: 20px 0;
    font-size: 14px;
    color: #666;
    span {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>